<template>
  <div class="home">
    <el-steps
      class="step"
      :active="activeStep"
      finish-status="success"
      align-center
    >
      <el-step title="基本信息" />
      <el-step title="确认信息" />
      <el-step title="选号" />
    </el-steps>
    <!-- 第一步选择车管所 -->
    <step-a v-if="activeStep == 0" v-model="dmv" />
    <el-dialog
      title="业务须知"
      :visible.sync="stepADialogVisible"
      width="70%"
      center
    >
      <span>
        1、可为本人或本单位新购的小型汽车（二手车和需报公务号牌车辆除外）可办理互联网预选机动车号牌业务。
        <br>
        <br>
        2、申请人必须确保录入车辆识别代号、联系方式以及购车发票等信息的准确性。录入信息不符合实际情况的，取消预选号牌号码。
        <br>
        <br>
        3、预选号成功后，请在有效期（平台界面和短信均有提示）内到车管所办理注册登记（新车上牌）业务，逾期未办理的，取消预选号牌，同时，用户也将被记入"黑名单"，2年内不能在本平台办理选号业务。预选号保留有效期内，同一用户不允许再次选号。
        <br>
        <br>
        4、预选号成功后，用户可打印选号凭证。到窗口办理注册登记业务时，对于打印了选号凭证的，可以向车管所工作人员提交选号凭证；对于未打印的，需向车管所工作人员说明互联网预选号情况。
        <br>
        <br>
        5、请您如实填写相关信息，对于提供虚假信息申办业务的，一经发现，将被记入"黑名单"，停止办理网上机动车和驾驶人业务。由此产生的一切法律责任由申请人承担。
        <br>
        <br>
        6、严禁使用任何外挂软件或其它非正常手段查号、占号、抢号，一经发现，取消申请人预选号牌。由此产生的一切法律责任由申请人承担。
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="stepADialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="goToStepB()"> 确 定 </el-button>
      </span>
    </el-dialog>
    <!-- 第二步 确认消息 -->
    <step-b v-if="activeStep == 1" v-model="requestForm" />
    <!-- 第三步 -->
    <step-c v-if="activeStep == 2" v-model="requestForm" />

    <el-result
      v-if="activeStep == 3"
      :icon="stepCIcon"
      :title="stepCTitle"
      :sub-title="stepCSubtitle"
    />
    <!-- 底部按钮 -->
    <div class="foot">
      <el-button type="primary" @click="next()">{{ activeButton }}</el-button>
    </div>
  </div>
</template>

<script>
import stepA from '@/components/home/stepA.vue'
import StepB from '@/components/home/stepB.vue'
import StepC from '@/components/home/stepC.vue'
import { selectPlate } from '@/api/select/select'
import { mapGetters } from 'vuex'
export default {
  name: 'Home',
  components: { stepA, StepB, StepC },
  data() {
    return {
      activeStep: 0,
      activeButton: '下一步',
      stepADialogVisible: false,
      dmv: '', // 车管所名称
      // 第二步的结果数据
      requestForm: {
        voucher: '', // 机动车凭证
        variety: '', // 品牌种类
        certificate: '', // 合格证号
        identify: '', // 车俩识别代号
        carplatefront: '' // 车牌号前缀
      },
      Form: {
        voucher: '', // 机动车凭证
        variety: '', // 品牌种类
        certificate: '', // 合格证号
        identify: '', // 车俩识别代号
        carplate: '', // 车牌号
        userid: ''
      },
      stepCIcon: '',
      stepCTitle: '',
      stepCSubtitle: ''
    }
  },
  computed: {
    ...mapGetters([
      'username',
      'avatar',
      'roles'
    ])
  },
  methods: {
    goToStepB() {
      this.stepADialogVisible = false
      this.activeStep = 1
      this.activeButton = '提交'
    },
    next() {
      if (this.activeStep === 0) {
        if (this.dmv) {
          this.stepADialogVisible = true
        } else {
          this.$message.error('请选择车管所')
        }
      } else if (this.activeStep === 1) {
        if (this.formAllExist(this.requestForm)) {
          this.activeStep = 2
          this.activeButton = '完成'
        } else {
          this.$message.error('请提交完整的表单')
        }
      } else if (this.activeStep === 2) {
        this.Form.dmv = this.dmv
        this.Form.voucher = this.requestForm.voucher
        this.Form.variety = this.requestForm.variety
        this.Form.certificate = this.requestForm.certificate
        this.Form.identify = this.requestForm.identify
        this.Form.carplate = this.requestForm.carplatefront
        this.Form.userid = this.username
        selectPlate(this.Form).then(response => {
          // 这里可以写一个判断是否发送成功
          this.$message({ message: '选好成功', type: 'success' })
          this.stepCIcon = 'success' // 如果发送失败把值改为 error
          this.stepCTitle = '选号成功'
          this.stepCSubtitle = '按返回键重新选号'
          this.activeButton = '返回'
          this.activeStep = 3
          this.requestForm = ''
          this.Form = ''
        }).catch(error => {
          console.log(error)
        })
      } else if (this.activeStep === 3) {
        this.activeStep = 0
      }
    },
    formAllExist(object) {
      let existed = true
      Object.keys(object).forEach(function(x) {
        if (object[x] === null || !object[x]) {
          existed = false
        }
      })
      if (existed) {
        // 全有值
        return true
      }
      return false
    }
  }
}
</script>

<style scoped>
.home .step {
  margin: 60px;
}
.home .foot {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>
